<template>
  <div class="dashboard-view">
    <div class="dashboard-header">
      <h1>数据可视化展示</h1>
    </div>

    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
      class="layout"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        class="grid-item"
      >
        <component
          :is="item.component"
          :chart-data="item.data"
          :chart-options="item.options"
        />
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'
import LineChart from '../components/ChartComponents/LineChart.vue'
import PieChart from '../components/ChartComponents/PieChart.vue'
import BarChart from '../components/ChartComponents/BarChart.vue'
import DataTable from '../components/ChartComponents/DataTable.vue'

export default {
  name: 'DashboardView',
  components: {
    GridLayout,
    GridItem,
    LineChart,
    PieChart,
    BarChart,
    DataTable,
  },
  data() {
    return {
      layout: [],
      refreshTimers: [],
    }
  },
  created() {
    this.loadLayout()
  },
  methods: {
    loadLayout() {
      try {
        const savedLayout = localStorage.getItem('dashboard-layout')
        if (savedLayout) {
          this.layout = JSON.parse(savedLayout)
          // 加载每个组件的数据
          this.layout.forEach((widget) => {
            if (widget.dataConfig) {
              this.loadWidgetData(widget)
            }
          })
        }
      } catch (error) {
        console.error('Error loading layout:', error)
      }
    },

    async loadWidgetData(widget) {
      if (!widget.dataConfig?.sourceId) return

      try {
        if (widget.dataConfig.sourceId.startsWith('default-')) {
          const mockData = this.generateMockData(widget.dataConfig)
          widget.data = this.transformData(
            mockData,
            widget.component,
            widget.dataConfig
          )
        } else {
          const response = await fetch(
            `/api/data/${widget.dataConfig.sourceId}`,
            {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(widget.dataConfig),
            }
          )

          const data = await response.json()
          widget.data = this.transformData(
            data,
            widget.component,
            widget.dataConfig
          )
        }

        // 设置自动刷新
        if (widget.dataConfig.autoRefresh) {
          const timer = setInterval(() => {
            this.loadWidgetData(widget)
          }, widget.dataConfig.refreshInterval * 1000)
          this.refreshTimers.push(timer)
        }
      } catch (error) {
        console.error('Failed to load widget data:', error)
      }
    },

    // 复用 Dashboard.vue 中的 transformData 和 generateMockData 方法
    transformData(data, chartType, config) {
      // ... 从 Dashboard.vue 复制 transformData 方法 ...
    },

    generateMockData(config) {
      // ... 从 Dashboard.vue 复制 generateMockData 方法 ...
    },
  },
  beforeDestroy() {
    // 清理所有定时器
    this.refreshTimers.forEach((timer) => clearInterval(timer))
  },
}
</script>

<style scoped>
.dashboard-view {
  background: url('../../../../assets/dashboard-bg.png') center center;
  background-size: cover;
  background-size: 100% 100%;
}
.dashboard-view {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 20px;
  text-align: center;
}

.layout {
  min-height: calc(100vh - 100px);
  background: transparent;
  position: relative;
}

.grid-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
</style> 